<template>
  <ul>
      <li :style="{opacity}">欢迎来到菜菜世界</li>
      <li v-for="(n,index) in newlist" :key="index">
        {{n}}
        <input type="text">
      </li>
  </ul>
</template>

<script>
export default {
    name:'News',
    data() {
      return {
        newlist:['新闻1','新闻2'],
        opacity:1
      }
    },
    beforeDestroy(){
      console.log('news组件即将被销毁')
    },
    activated(){
      console.log('News组件被激活')
      this.timer = setInterval(()=>{
        console.log('定时器在工作')
        this.opacity -= 0.01
        if(this.opacity <= 0)
          this.opacity = 1
      },16)
    },
    deactivated() {
      console.log('News组件失活')
      clearInterval(this.timer)
      console.log('d')
    },
}
</script>

<style>

</style>